<template>
    <PopUps :bgIndex="900" :boxIndex="1001" widthMy='60%'  height-my="78%">
        <div class="header-top">
            <h3>测量单信息</h3>
            <i class="iconfont icon-icon-cross-empty" @click="closePopUps"></i>
        </div>
        <div class="business">
            <!-- 测量但 -->
            <el-form :model="businessForm" label-width="auto" ref="ruleFormRef">
                <div class="business-form">
                    <h4> 测量单</h4>
                    <div class="form-box">
                        <el-form-item label="终端名称" prop="terminalName" required>
                            <el-input v-model="businessForm.terminalName" placeholder="请输入终端名称" :disabled="true" />
                        </el-form-item>

                        <el-form-item label="客户名称" prop="customerName" required>
                            <el-select v-model="businessForm.customerName" placeholder="请输入客户名称" :disabled="true">
                                <el-option v-for="item in customerList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="厂家负责人" prop="manufacturerContact" required>
                            <el-input v-model="businessForm.manufacturerContact" placeholder="请输入厂家负责人" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="经营测量人员" prop="businessSurveyorName" required>
                            <!-- <el-select v-model="businessForm.businessSurveyorName" multiple placeholder="请选择测量人员"
                                :disabled="true">
                                <el-option v-for="item in businessSurveyorOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select> -->
                            <el-input  v-model="businessForm.businessSurveyorName" placeholder="请选择测量人员"   disabled/>
                        </el-form-item>
                        <el-form-item label="测量日期" prop="surveyDate" required>
                            <el-date-picker v-model="businessForm.surveyDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                :disabled="true" placeholder="请选择测量日期" />
                        </el-form-item>
                        <!-- <el-form-item label="设计人员(多选)" prop="designerList" required>
                            <el-select v-model="businessForm.designerList" multiple placeholder="请选择设计人员" :disabled="true">
                                <el-option v-for="item in businessSurveyorOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="设计元素" prop="designElements" required>
                            <el-input v-model="businessForm.designElements" placeholder="请选择设计元素" :disabled="true" />
                        </el-form-item>
                        <!-- <el-form-item label="安装队" prop="installer">
                            <el-select v-model="businessForm.installer" placeholder="请选择安装队" :disabled="true">
                                <el-option v-for="item in businessSurveyorOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="终端电话" class="terminalPhone" prop="terminalPhone" required>
                            <p>+86</p>
                            <el-input v-model="businessForm.terminalPhone" placeholder="请输入11位手机号码" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="城管报备情况" prop="urbanManagementReport">
                            <el-select placeholder="请选择城管报备情况" v-model="businessForm.urbanManagementReport" clearable
                                :disabled="true">
                                <el-option v-for="item in businessSurveyorOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="detailedAddress">
                            <el-input v-model="businessForm.detailedAddress" placeholder="请输入详细地址" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="主线到招牌距离" class="config" prop="mainLineDistance">
                            <el-input v-model="businessForm.mainLineDistance" placeholder="请输入主线到招牌距离" :disabled="true" />
                            <p class="unit">CM</p>
                        </el-form-item>
                        <el-form-item label="下单类别" prop="mtype" >
                            <el-select v-model="businessForm.mtype"  placeholder="请选择下单类别" :disabled="true">
                                <el-option  label="物料类"  value="物料类" />
                                <el-option  label="其他类"  value="其他类" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="店面现场环境" class="shopEnvironment" prop="shopEnvironment">
                            <p class="shopEnvironmentLable">门头高地高度</p>
                            <el-input v-model="businessForm.shopEnvironment" placeholder="请输入" :disabled="true" />
                            <p class="unit">CM</p>
                        </el-form-item>
                        <el-form-item class="shopRadio">
                            <el-radio-group v-model="businessForm.shopRadio" :disabled="true">
                                <el-radio value="1" label="1">新开店</el-radio>
                                <el-radio value="2" label="2">已有店面改造</el-radio>
                                <el-radio value="3" label="3">其他</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="店面情况-其他" prop="other">
                            <el-input v-model="businessForm.other" placeholder="请输入"
                                :disabled="businessForm.shopRadio != '3'" />
                        </el-form-item>
                    </div>
                </div>
                <div class="structuralDiagram">
                    <div class="title">
                        <h4>现场平面结构图</h4>
                        <span>需注明具体材质与尺寸</span>
                    </div>
                    <div class="form-box">
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight"
                            v-if="optionModel == '固定-单片'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth"
                            v-show="optionModel == '固定-单片'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗玻璃高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗玻璃宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗上宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowTopWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗上高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowTopHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗左宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowLeftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗左高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowLeftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗右宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowRightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗右高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowRightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗下宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowBottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗下高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowBottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱四高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnFourHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱四宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnFourWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱五高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnFiveHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱五宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnFiveWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱六高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnSixHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱六宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnSixWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <div class="optionModel">
                            <el-form-item label="选取模板" class="config">
                                <el-select v-model="optionModel" disabled>
                                    <el-option v-for="item in optionModelList" :key="item.id" :label="item.imageName"
                                        :value="item.imageName" />
                                </el-select>
                            </el-form-item>

                            <div class="modleimage">
                                <el-image :src="optionModelUrl" lazy />
                                <!-- 固定 1 -->
                                <!-- 选择1固定图片的正面数据宽度 -->
                                <div v-show="optionModel == '固定-单片'">
                                    <span class="guding-one-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <!-- 选择1固定图片的正面数据高度 -->
                                    <span class="guding-one-zhengmianH">{{ businessForm.frontHeight }}</span>
                                </div>

                                <!-- 固定 2-->
                                <div v-show="optionModel == '固定-四周厚度无包柱'">
                                    <span class="guding-two-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="guding-two-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="guding-two-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="guding-two-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="guding-two-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="guding-two-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="guding-two-youceW">{{ businessForm.rightWidth }}</span>
                                    <span class="guding-two-youceH">{{ businessForm.rightHeight }}</span>
                                    <span class="guding-two-xiaceW">{{ businessForm.bottomWidth }}</span>
                                    <span class="guding-two-xiaceH">{{ businessForm.bottomHeight }}</span>
                                </div>

                                <!-- 固定-3 -->
                                <div v-show="optionModel == '固定-四周厚度+两个包柱'">
                                    <span class="guding-three-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="guding-three-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="guding-three-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="guding-three-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="guding-three-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="guding-three-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="guding-three-youceW">{{ businessForm.rightWidth }}</span>
                                    <span class="guding-three-youceH">{{ businessForm.rightHeight }}</span>
                                    <span class="guding-three-xiadiH">{{ businessForm.bottomHeight }}</span>
                                    <span class="guding-three-xiadiW">{{ businessForm.bottomWidth }}</span>
                                    <span class="guding-three-menmeiW">{{ businessForm.doorWidth }}</span>
                                    <span class="guding-three-menmeiH">{{ businessForm.doorHeight }}</span>
                                    <span class="guding-three-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                    <span class="guding-three-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                    <span class="guding-three-baozhu2W">{{ businessForm.columnThreeWidth }}</span>
                                    <span class="guding-three-baozhu2H">{{ businessForm.columnThreeHeight }}</span>
                                </div>

                                <!-- 多选-4 -->
                                <div v-if="optionModel == '多选-门头含包柱'">
                                    <span class="duoxuan-four-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="duoxuan-four-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="duoxuan-four-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="duoxuan-four-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="duoxuan-four-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="duoxuan-four-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="duoxuan-four-youceW">{{ businessForm.rightWidth }}</span>
                                    <span class="duoxuan-four-youceH">{{ businessForm.rightHeight }}</span>
                                    <span class="duoxuan-four-xiadiH">{{ businessForm.bottomHeight }}</span>
                                    <span class="duoxuan-four-xiadiW">{{ businessForm.bottomWidth }}</span>
                                    <span class="duoxuan-four-menmeiW">{{ businessForm.doorWidth }}</span>
                                    <span class="duoxuan-four-menmeiH">{{ businessForm.doorHeight }}</span>
                                    <span class="duoxuan-four-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                    <span class="duoxuan-four-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                    <span class="duoxuan-four-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-four-baozhu2H">{{ businessForm.columnTwoHeight }}</span>
                                </div>

                                <!-- 多选-5 -->
                                <div v-else-if="optionModel == '多选-门头含橱窗'">
                                    <span class="duoxuan-five-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="duoxuan-five-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="duoxuan-five-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="duoxuan-five-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="duoxuan-five-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="duoxuan-five-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="duoxuan-five-youceW">{{ businessForm.rightWidth }}</span>
                                    <span class="duoxuan-five-youceH">{{ businessForm.rightHeight }}</span>
                                    <span class="duoxuan-five-xiadiW">{{ businessForm.bottomWidth }}</span>
                                    <span class="duoxuan-five-xiadiH">{{ businessForm.bottomHeight }}</span>
                                    <span class="duoxuan-five-menmeiW">{{ businessForm.doorWidth }}</span>
                                    <span class="duoxuan-five-menmeiH">{{ businessForm.doorHeight }}</span>
                                    <span class="duoxuan-five-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                    <span class="duoxuan-five-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                    <span class="duoxuan-five-baozhu3W">{{ businessForm.columnThreeWidth }}</span>
                                    <span class="duoxuan-five-baozhu3H">{{ businessForm.columnThreeHeight }}</span>
                                    <span class="duoxuan-five-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-five-baozhu2H">{{ businessForm.columnTwoHeight }}</span>

                                    <span class="duoxuan-five-chuchuangT-W">{{ businessForm.windowTopWidth }}</span>
                                    <span class="duoxuan-five-chuchuangT-H">{{ businessForm.windowTopHeight }}</span>
                                    <span class="duoxuan-five-chuchuangL-W">{{ businessForm.windowLeftWidth }}</span>
                                    <span class="duoxuan-five-chuchuangL-H">{{ businessForm.windowLeftHeight }}</span>
                                    <span class="duoxuan-five-chuchuangR-W">{{ businessForm.windowRightWidth }}</span>
                                    <span class="duoxuan-five-chuchuangR-H">{{ businessForm.windowRightHeight }}</span>
                                    <span class="duoxuan-five-chuchuangboli-W">{{ businessForm.windowWidth }}</span>
                                    <span class="duoxuan-five-chuchuangboli-H">{{ businessForm.windowHeight }}</span>
                                    <span class="duoxuan-five-chuchuangb-W">{{ businessForm.windowBottomWidth }}</span>
                                    <span class="duoxuan-five-chuchuangb-H">{{ businessForm.windowBottomHeight }}</span>
                                </div>

                                <!-- 多选-6 -->
                                <div v-else-if="optionModel == '多选-多间门头'">
                                    <span class="duoxuan-six-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="duoxuan-six-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="duoxuan-six-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="duoxuan-six-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="duoxuan-six-yuoceW">{{ businessForm.rightWidth }}</span>
                                    <span class="duoxuan-six-yuoceH">{{ businessForm.rightHeight }}</span>
                                    <span class="duoxuan-six-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="duoxuan-six-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="duoxuan-six-xiadiW">{{ businessForm.bottomWidth }}</span>
                                    <span class="duoxuan-six-xiadiH">{{ businessForm.bottomHeight }}</span>
                                    <span class="duoxuan-six-menmeiW">{{ businessForm.doorWidth }}</span>
                                    <span class="duoxuan-six-menmeiH">{{ businessForm.doorHeight }}</span>
                                    <span class="duoxuan-six-baozhu1W">{{ businessForm.columnOneWidth }}</span>
                                    <span class="duoxuan-six-baozhu1H">{{ businessForm.columnOneHeight }}</span>
                                    <span class="duoxuan-six-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-six-baozhu2H">{{ businessForm.columnTwoHeight }}</span>
                                    <span class="duoxuan-six-baozhu3W">{{ businessForm.columnThreeWidth }}</span>
                                    <span class="duoxuan-six-baozhu3H">{{ businessForm.columnThreeHeight }}</span>
                                    <span class="duoxuan-six-baozhu4W">{{ businessForm.columnFourWidth }}</span>
                                    <span class="duoxuan-six-baozhu4H">{{ businessForm.columnFourHeight }}</span>
                                    <span class="duoxuan-six-baozhu5W">{{ businessForm.columnFiveWidth }}</span>
                                    <span class="duoxuan-six-baozhu5H">{{ businessForm.columnFiveHeight }}</span>
                                    <span class="duoxuan-six-baozhu6W">{{ businessForm.columnSixWidth }}</span>
                                    <span class="duoxuan-six-baozhu6H">{{ businessForm.columnSixHeight }}</span>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>


                <div class="materialList">
                    <h4>生动化数据</h4>
                    <div class="materialList-box" v-for="(v, index) in materialList" :key="index">
                        <div class="navBox">
                            <p class="indexHao">第{{ index + 1 }}项</p>
                            <p class="iconfontP iconfontPAdd"><i class="iconfont icon-zengjiatianjiajiahao"
                                    @click="addMaterial(v)"></i></p>
                            <p class="iconfontP iconfontPDelite" v-if="materialList.length > 1 || index !== 0"><i
                                    class="iconfont icon-shanchu3" @click="deleteMaterial(index)"
                                    v-show="materialList.length > 1 || index !== 0"></i></p>
                        </div>
                        <div class="materialList-input-box">
                            <el-form-item label="业务类型" prop="businessType">
                                <el-select v-model="v.businessType" placeholder="请选择业务类型">
                                    <el-option v-for="item in businessSurveyorOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="存货名称" prop="productId">
                                <el-select v-model="v.productId" placeholder="请选择存货名称">
                                    <el-option v-for="item in businessSurveyorOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="单位与数量" prop="totalQuantity" class="config">
                                <el-input v-model="v.totalQuantity" placeholder="请输入单位与数量" />
                                <p class="unit">待定</p>
                            </el-form-item>
                            <el-form-item label="长度" prop="materialHeight" class="config">
                                <el-input v-model="v.materialHeight" placeholder="请输入长度" />
                                <p class="unit">m</p>
                            </el-form-item>
                            <el-form-item label="宽度" prop="materialWidth" class="config">
                                <el-input v-model="v.materialWidth" placeholder="请输入宽度" />
                                <p class="unit">m</p>
                            </el-form-item>
                            <el-form-item label="件数" prop="quantityPerPiece">
                                <el-input v-model="v.quantityPerPiece" placeholder="请输入件数" />
                            </el-form-item>
                            <el-form-item label="设计元素" prop="materialDesignElements" class="materialDesignElements">
                                <el-input v-model="v.materialDesignElements" placeholder="请输入设计元素" />
                            </el-form-item>
                            <el-form-item label="备注" prop="materialRemark" class="materialRemark">
                                <el-input v-model="v.materialRemark" placeholder="请输入备注" />
                            </el-form-item>
                        </div>

                        <!-- 
                    <el-form-item label="材质与尺寸" prop="materialList">
                        <el-input v-model="v" type="textarea" placeholder="请输入材料与尺寸" />
                    </el-form-item> -->
                    </div>

                    <div class="materialImage">
                        <h4>生动化图片补充</h4>
                        <el-image :src="materialImage" v-if="materialImage"></el-image>
                        <div class="notImage" v-else>
                            暂无图片
                        </div>
                    </div>
                </div>

                <el-form-item class="btn-box">
                    <el-button type="primary" @click="closePopUps">
                        关闭
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </PopUps>
</template>

<script setup>
import PopUps from '@/components/My/PopUps';
import { listMeasurementgetInfo } from '@/api/costSum'
import { getEmployeeApi, getWorkApi } from '@/api/tickets'

const emit = defineEmits(['closePopUps'])
const props = defineProps({
    id: {
        type: [Number,Array,Object],
        default: false
    }
})
// 生动化数据
const materialList = ref([{
    businessType: '',
    totalQuantity: '',
    materialHeight: '',
    materialWidth: '',
    quantityPerPiece: '',
    materialDesignElements: '',
    materialRemark: '',
}])
// 生动化图片
let materialImage = ref('')
let deviseList = ref(null)
let optionModelData = ref(true)

let businessForm = reactive({
    terminalName: '',
    customerId: '',
    customerName: '',
    manufacturerContact: '',
    businessSurveyor: '',
    surveyDate: '',
    designElements: '',
    businessSurveyorName:'',
    installer: '',
    terminalName: '',
    terminalPhone: '',
    urbanManagementReport: '',
    detailedAddress: '',
    mainLineDistance: '',
    mtype: '',
    shopEnvironment: '',
    shopRadio: "0",
    other: '',


    waterproofHeight: '',
    waterproofWidth: '',
    leftHeight: '',
    leftWidth: '',
    windowHeight: '',
    windowWidth: '',
    windowTopWidth: '',
    windowTopHeight: '',
    windowLeftWidth: '',
    windowLeftHeight: '',
    windowRightWidth: '',
    windowRightHeight: '',
    windowBottomWidth: '',
    windowBottomHeight: '',
    rightHeight: '',
    rightWidth: '',
    frontHeight: '',
    frontWidth: '',
    bottomHeight: '',
    bottomWidth: '',
    doorHeight: '',
    doorWidth: '',
    columnOneHeight: '',
    columnOneWidth: '',
    columnTwoHeight: '',
    columnTwoWidth: '',
    columnThreeHeight: '',
    columnThreeWidth: '',
    columnFourHeight: '',
    columnFourWidth: '',
    columnFiveHeight: '',
    columnFiveWidth: '',
    columnSixHeight: '',
    columnSixWidth: '',

    materialImage: ''
})
let businessSurveyorOptions = ref([

])
let customerList = reactive([

])
// 模板名称 modelName
let optionModel = ref('固定-单片')
let optionModelUrl = ref(new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href)
let optionModelList = reactive([
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href,
        imageName: '固定-单片',
        id: '固定-单片'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/2.[w173.92cm×h58.66cm].png', import.meta.url).href,
        imageName: '固定-四周厚度无包柱',
        id: '固定-四周厚度无包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/3.[w165.51cm×h128.03cm].png', import.meta.url).href,
        imageName: '固定-四周厚度+两个包柱',
        id: '固定-四周厚度+两个包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/4.[w167.80cm×h130.18cm].png', import.meta.url).href,
        imageName: '多选-门头含包柱',
        id: '多选-门头含包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/5.[w167.80cm×h130.37cm].png', import.meta.url).href,
        imageName: '多选-门头含橱窗',
        id: '多选-门头含橱窗'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/6.[w167.80cm×h130.18cm].png', import.meta.url).href,
        imageName: '多选-多间门头',
        id: '多选-多间门头'
    },
])

// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
    let params = { customerName: v }
    let { code, data } = await getWorkApi(params)
    if (code == 200) {
        data.forEach(v => {
            customerList.push({
                label: v.primaryClassification + '/' + v.customerName,
                value: v.customerId
            })
        });
    }
}
watch(() => optionModel.value, (val) => {
    switch (val) {
        case '固定-单片':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href

            break;
        case '固定-四周厚度无包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/2.[w173.92cm×h58.66cm].png', import.meta.url).href

            break;
        case '固定-四周厚度+两个包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/3.[w165.51cm×h128.03cm].png', import.meta.url).href

            break;
        case '多选-门头含包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/4.[w167.80cm×h130.18cm].png', import.meta.url).href

            break;
        case '多选-门头含橱窗':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/5.[w167.80cm×h130.37cm].png', import.meta.url).href

            break;
        case '多选-多间门头':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/6.[w167.80cm×h130.18cm].png', import.meta.url).href

            break;

        default:
            break;
    }
})
// 获取员工
const getEmployeeApiFn = async () => {
    let params = {
        employeeName: ''
    }
    let { code, data } = await getEmployeeApi(params)
    if (code == 200) {
        data.forEach(v => {
            businessSurveyorOptions.value.push({
                label: v.employeeName,
                value: v.employeeId
            })
        });
    }
}
// 取消
const closePopUps = () => {
    emit('closePopUps')
}
const callbackFn = () => {
    for (const key in businessForm) {
        businessForm[key] = deviseList.value[key]
    }



    let arrBusinessSurveyor = [JSON.parse(deviseList.value.businessSurveyor)] || []
    let arrDesigner = [JSON.parse(deviseList.value.designer)] || []
    // businessForm.businessSurveyorList = arrBusinessSurveyor.map(String)
    // businessForm.designerList = arrDesigner.map(String)
    businessForm.id = deviseList.value.id
    optionModelData.value = false
    optionModel.value = deviseList.value.type
    materialList.value = JSON.parse(deviseList.value.materialList)

}
// 测量详情接口
const listMeasurementgetInfoFn = async (v) => {
    let params = {
        id: v
    }
    let { code, data } = await listMeasurementgetInfo(params)
    if (code == 200) {
        deviseList.value = data
        callbackFn()
    }
}
onMounted(() => {
    if (props) {
        deviseList.value = props.id
        callbackFn()






        getEmployeeApiFn()
        getWorkApiData()
    }
})
</script>

<style scoped lang="scss">
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 2023;
    position: sticky;
    top: 0;
    height: 40px;
    margin-bottom: 20px;
    padding: 20px;

    .iconfont {
        color: #666;
        font-size: 27px;
    }
}

.business {

    :deep(.el-form) {
        width: 100%;
        max-width: 100% !important;

        .el-input__wrapper {
            background: #F2F3F5;
            box-shadow: none;
        }

        .el-form-item {
            display: flex;
            flex-direction: column;
        }

        .config {
            .el-form-item__content {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;

                .el-input {
                    width: 87%;
                }

                .unit {
                    background-color: #F2F3F5;
                    width: 25%;
                    text-align: center;
                }

                .el-input__wrapper {
                    border-radius: 0px;
                    border-right: 1px solid #dbdbdb;
                }
            }
        }

        .business-form {
            background-color: #fff;
            padding: 20px;

            h4 {
                padding-bottom: 20px;
                font-weight: 550;

                .iconfont {
                    border-radius: 50%;
                    padding: 5px;
                    transition: all .3s;

                    &:hover {
                        background-color: #1947FF;
                        color: #fff;
                    }
                }
            }

            .form-box {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                .shopRadio {
                    flex-direction: none;

                    .el-form-item__content {
                        margin: 0 !important;
                    }
                }

                .el-form-item {
                    margin-right: 40px;
                    width: 342px;

                    .el-form-item__label-wrap {
                        margin: 0 !important;
                    }


                    .el-form-item__content {
                        width: 100%;

                        .el-select,
                        .el-input {
                            width: 100%;
                        }
                    }
                }

                .is-disabled {
                    .el-input__wrapper {
                        color: #eeeeee;
                    }
                }



                .shopEnvironment {
                    .el-form-item__content {
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;

                        .shopEnvironmentLable {
                            background-color: #F2F3F5;
                            width: 32%;
                            text-align: center;
                        }

                        .el-input {
                            width: 55%;
                        }

                        .unit {
                            background-color: #F2F3F5;
                            width: 25%;
                            text-align: center;
                        }

                        .el-input__wrapper {
                            border-radius: 0px;
                            border-left: 1px solid #dbdbdb;
                            border-right: 1px solid #dbdbdb;
                        }
                    }
                }

                .terminalPhone {
                    .el-form-item__content {
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;

                        .el-input {
                            width: 87%;
                        }

                        p {
                            background-color: #F2F3F5;
                            width: 13%;
                            text-align: center;
                        }

                        .el-input__wrapper {
                            border-radius: 0px;
                            border-left: 1px solid #dbdbdb;
                        }
                    }
                }


            }

        }

        .structuralDiagram {
            background-color: #fff;
            padding: 20px;
            margin-top: 16px;

            .title {
                padding-bottom: 20px;
                display: flex;
                align-items: center;

                h4 {
                    font-weight: 550;
                    margin-right: 10px;
                }

                span {
                    color: #ccc;
                }
            }

            .form-box {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .el-form-item {
                    margin-right: 40px;
                    width: 164px;

                    .el-form-item__label-wrap {
                        margin: 0 !important;
                    }

                    .el-input__wrapper {
                        background: #F2F3F5;
                    }

                    .el-form-item__content {
                        width: 100%;

                        .el-input {
                            width: 72%;
                        }

                        .unit {
                            width: 28%;
                        }
                    }
                }
            }

        }

    //     .optionModel {

    //         .el-form-item__content,
    //         .el-select,
    //         .el-input {
    //             width: 100% !important;
    //         }

    //         .el-form-item__label-wrap {
    //             margin: 0 !important;
    //         }

    //         .el-form-item {
    //             margin-right: 40px;
    //             width: 164px;

    //             .el-form-item__label-wrap {
    //                 margin: 0 !important;
    //             }

    //             .el-input__wrapper {
    //                 background: #F2F3F5;
    //             }

    //             .el-form-item__content {
    //                 width: 100%;

    //                 .el-input {
    //                     width: 72%;
    //                 }

    //                 .unit {
    //                     width: 28%;
    //                 }
    //             }
    //         }
    //     }

    // }

    .optionModel {
        .el-form-item {
            width: 100% !important;
        }

        .el-form-item__content,
        .el-select,
        .el-input {
            width: 100% !important;
        }

        .el-form-item__label-wrap {
            margin: 0 !important;
        }

        .modleimage {
            width: 40%;
            height: 40%;
            margin: 0 auto;
            position: relative;

            .el-image {
                width: 100%;
                height: 100%;
            }

            span {
                position: absolute;
                font-size: 12px;
                color: red;
                font-weight: 550;
            }

            .guding-one-zhengmianW {
                top: 9%;
                left: 47%;
            }

            .guding-one-zhengmianH {
                left: 1%;
                bottom: 52%;
            }

            .guding-two-fangshuiW {
                left: 49%;
                top: 0%;
            }

            .guding-two-fangshuiH {
                left: 14%;
                bottom: 78%;
            }

            .guding-two-zuoceW {
                left: 11%;
                bottom: 71%;
            }

            .guding-two-zuoceH {
                left: 6%;
                bottom: 47%;
            }

            .guding-two-zhengmianW {
                left: 49%;
                bottom: 70%;
            }

            .guding-two-zhengmianH {
                left: 15%;
                bottom: 49%;
            }

            .guding-two-youceW {
                left: 87%;
                bottom: 72%;

            }

            .guding-two-youceH {
                left: 92%;
                bottom: 47%;
            }

            .guding-two-xiaceW {
                left: 49%;
                bottom: 31%;
            }

            .guding-two-xiaceH {
                left: 17%;
                bottom: 20%;
            }


            .guding-three-fangshuiW {
                left: 50%;
                bottom: 91%;
            }

            .guding-three-fangshuiH {
                left: 13%;
                bottom: 86%;
            }

            .guding-three-zhengmianW {
                left: 50%;
                bottom: 82%;
            }

            .guding-three-zhengmianH {
                left: 14%;
                bottom: 72%;
            }

            .guding-three-zuoceH {
                left: 4%;
                bottom: 72%;
            }

            .guding-three-zuoceW {
                left: 9%;
                bottom: 62%;
            }

            .guding-three-youceW {
                left: 90%;
                bottom: 62%;
            }

            .guding-three-youceH {
                left: 94%;
                bottom: 71%;
            }

            .guding-three-xiadiH {
                left: 16%;
                bottom: 58%;
            }

            .guding-three-xiadiW {
                left: 50%;
                bottom: 64%;
            }

            .guding-three-menmeiW {
                left: 50%;
                bottom: 48%;
            }

            .guding-three-menmeiH {
                left: 18%;
                bottom: 53%;
            }

            .guding-three-baozhuH {
                left: 18%;
                bottom: 30%;
            }

            .guding-three-baozhuW {
                left: 22%;
                bottom: 8%;
            }

            .guding-three-baozhu2W {
                left: 77%;
                bottom: 8%;
            }

            .guding-three-baozhu2H {
                left: 82%;
                bottom: 29%;
            }

            // 多选样式
            .duoxuan-four-fangshuiW {
                left: 48%;
                bottom: 89%;
            }

            .duoxuan-four-fangshuiH {
                left: 10%;
                bottom: 85%;
            }

            .duoxuan-four-zhengmianW {
                left: 48%;
                bottom: 76%;
            }

            .duoxuan-four-zhengmianH {
                left: 18%;
                bottom: 71%;
            }

            .duoxuan-four-zuoceH {
                left: 2%;
                bottom: 71%;
            }

            .duoxuan-four-zuoceW {
                left: 8%;
                bottom: 60%;
            }

            .duoxuan-four-youceW {
                left: 87%;
                bottom: 60%;
            }

            .duoxuan-four-youceH {
                left: 94%;
                bottom: 70%;
            }

            .duoxuan-four-xiadiH {
                left: 14%;
                bottom: 56%;
            }

            .duoxuan-four-xiadiW {
                left: 43%;
                bottom: 59%;
            }

            .duoxuan-four-menmeiW {
                left: 49%;
                bottom: 47%;
            }

            .duoxuan-four-menmeiH {
                left: 16%;
                bottom: 52%;
            }

            .duoxuan-four-baozhuH {
                left: 15%;
                bottom: 29%;
            }

            .duoxuan-four-baozhuW {
                left: 21%;
                bottom: 5%;
            }

            .duoxuan-four-baozhu2W {
                left: 75%;
                bottom: 6%;
            }

            .duoxuan-four-baozhu2H {
                left: 81%;
                bottom: 27%;
            }

            // 多选五
            .duoxuan-five-fangshuiW {
                left: 50%;
                bottom: 91%;
            }

            .duoxuan-five-fangshuiH {
                left: 12%;
                bottom: 85%;
            }

            .duoxuan-five-zhengmianW {
                left: 48%;
                bottom: 76%;
            }

            .duoxuan-five-zhengmianH {
                left: 19%;
                bottom: 71%;
            }

            .duoxuan-five-zuoceH {
                left: 4%;
                bottom: 71%;
            }

            .duoxuan-five-zuoceW {
                left: 10%;
                bottom: 61%;
            }

            .duoxuan-five-youceW {
                left: 89%;
                bottom: 61%;
            }

            .duoxuan-five-youceH {
                left: 95%;
                bottom: 71%;
            }

            .duoxuan-five-xiadiH {
                left: 16%;
                bottom: 56%;

            }

            .duoxuan-five-xiadiW {
                left: 43%;
                bottom: 59%;
            }

            .duoxuan-five-menmeiW {
                left: 57%;
                bottom: 52%;
            }

            .duoxuan-five-menmeiH {
                left: 18%;
                bottom: 52%;
            }

            .duoxuan-five-baozhuH {
                left: 15%;
                bottom: 29%;
            }

            .duoxuan-five-baozhuW {
                left: 21%;
                bottom: 6%;
            }

            .duoxuan-five-baozhu3W {
                left: 77%;
                bottom: 6%;
            }

            .duoxuan-five-baozhu3H {
                left: 83%;
                bottom: 29%;
            }

            .duoxuan-five-baozhu2H {
                left: 57%;
                bottom: 29%;
            }

            .duoxuan-five-baozhu2W {
                left: 51%;
                bottom: 7%;
            }

            .duoxuan-five-chuchuangT-W {
                left: 41%;
                bottom: 47%;
            }

            .duoxuan-five-chuchuangT-H {
                left: 27%;
                bottom: 47%;
            }

            .duoxuan-five-chuchuangL-W {
                left: 26%;
                bottom: 42%;
            }

            .duoxuan-five-chuchuangL-H {
                left: 25%;
                bottom: 31%;
            }

            .duoxuan-five-chuchuangR-W {
                left: 47%;
                bottom: 42%;
            }

            .duoxuan-five-chuchuangR-H {
                left: 47%;
                bottom: 31%;
            }

            .duoxuan-five-chuchuangboli-W {
                left: 36%;
                bottom: 19%;
            }

            .duoxuan-five-chuchuangboli-H {
                left: 41%;
                bottom: 31%;
            }

            .duoxuan-five-chuchuangb-W {
                left: 36%;
                bottom: 12%;
            }

            .duoxuan-five-chuchuangb-H {
                left: 27%;
                bottom: 13%;
            }

            // 多选-6
            .duoxuan-six-fangshuiW {
                left: 50%;
                bottom: 91%;
            }

            .duoxuan-six-fangshuiH {
                left: 12%;
                bottom: 86%;
            }

            .duoxuan-six-zuoceW {
                left: 9%;
                bottom: 63%;
            }

            .duoxuan-six-zuoceH {
                left: 3%;
                bottom: 73%;
            }

            .duoxuan-six-yuoceW {
                left: 90%;
                bottom: 63%;
            }

            .duoxuan-six-yuoceH {
                left: 96%;
                bottom: 73%;
            }

            .duoxuan-six-zhengmianW {
                left: 49%;
                bottom: 78%;
            }

            .duoxuan-six-zhengmianH {
                left: 19%;
                bottom: 73%;
            }

            .duoxuan-six-xiadiW {
                left: 45%;
                bottom: 60%;
            }

            .duoxuan-six-xiadiH {
                left: 13%;
                bottom: 59%;
            }

            .duoxuan-six-menmeiW {
                left: 36%;
                bottom: 54%;
            }

            .duoxuan-six-menmeiH {
                left: 15%;
                bottom: 54%;
            }

            .duoxuan-six-baozhu1W {
                left: 19%;
                bottom: 6%;
            }

            .duoxuan-six-baozhu1H {
                left: 13%;
                bottom: 30%;
            }

            .duoxuan-six-baozhu2W {
                left: 31%;
                bottom: 6%;
            }

            .duoxuan-six-baozhu2H {
                left: 26%;
                bottom: 30%;
            }

            .duoxuan-six-baozhu3W {
                left: 42%;
                bottom: 6%;
            }

            .duoxuan-six-baozhu3H {
                left: 37%;
                bottom: 30%;
            }

            .duoxuan-six-baozhu4W {
                left: 54%;
                bottom: 6%;
            }

            .duoxuan-six-baozhu4H {
                left: 49%;
                bottom: 30%;
            }

            .duoxuan-six-baozhu5W {
                left: 68%;
                bottom: 6%;
            }

            .duoxuan-six-baozhu5H {
                left: 63%;
                bottom: 30%;
            }

            .duoxuan-six-baozhu6W {
                left: 79%;
                bottom: 6%;
            }

            .duoxuan-six-baozhu6H {
                left: 83%;
                bottom: 30%;
            }
        }
    }



    .material {
        background-color: #fff;
        padding: 20px;
        margin-top: 20px;

        h4 {
            padding-bottom: 20px;
            font-weight: 550;
        }

        .el-form-item__label-wrap {
            margin: 0 !important;
        }

        .el-textarea__inner {
            background-color: #F2F3F5;
            min-height: 120px !important;
        }
    }

    .materialList {
        background-color: #fff;
        padding: 20px;
        margin-top: 20px;

        h4 {
            padding-bottom: 20px;
            font-weight: 550;
        }

        .el-form-item__label-wrap {
            margin: 0 !important;
        }

        .el-textarea__inner {
            background-color: #F2F3F5;
            min-height: 120px !important;
        }

        .materialList-box {

            .navBox {
                border-top: 1px solid #E5E6EB;
                position: relative;
                margin: 30px 0;

                .indexHao {
                    height: 20px;
                    width: 80px;
                    background-color: #fff;
                    position: absolute;
                    text-align: center;
                    top: -10px;
                    left: 50px;
                    font-weight: 550;
                }

                .iconfontP {
                    background-color: #fff;
                    text-align: center;
                    width: 80px;
                    position: absolute;
                    height: 20px;

                }

                .iconfontPAdd {
                    top: -12px;
                    right: 150px;
                    color: #165DFF;
                }

                .iconfontPDelite {
                    top: -12px;
                    right: 50px;
                    color: #F53F3F;
                }

                .icon-shanchu3 {
                    font-weight: 600;
                }

                .iconfont {
                    font-size: 24px;

                }
            }

            .materialList-input-box {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, 1fr);
                gap: 0px 20px;

                .materialDesignElements {
                    grid-column-start: 2;
                    grid-column-end: 4;
                }

                .materialRemark {
                    grid-column-start: 4;
                    grid-column-end: 6;
                }
            }
        }
    }

    .materialImage {
        background-color: #FFFFFF;
        padding: 20px;
        margin-top: 20px;

        h4 {
            padding-bottom: 20px;
            font-weight: 550;
        }

        .notImage {
            padding: 80px;
            color: #333;
            background-color: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .btn-box {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        padding-right: 40px;
        background-color: #FFFFFF;
        box-shadow: 0px -3px 12px 0px rgba(0, 0, 0, 0.10);
        height: 60px;
    }
}
}
</style>